<style lang="less">
@import './login.less';
</style>

<template>
  <div class="login">
    <div class="login-con">
      <Card icon="log-in" title="欢迎登录" :bordered="false">
        <div class="form-con">
          <login-form @on-success-valid="handleSubmit"></login-form>
          <!-- <p class="login-tip">输入任意用户名和密码即可</p> -->
        </div>
      </Card>
    </div>
  </div>
</template>

<script>
import LoginForm from '_c/login-form'
import { mapActions } from 'vuex'
import { menuDispatch } from '@/api/admin'
import { resetRouter } from '@/router'
import { filterAsyncRouter, fnAddDynamicMenuRoutes, localSave } from '@/utils'
import routers from '@/router/routers'

export default {
  components: {
    LoginForm
  },
  methods: {
    ...mapActions(['handleLogin', 'getUserInfo']),
    handleSubmit(options) {
      this.handleLogin(options).then((res) => {
        if (res.code === 200) {
          this.getUserInfo().then((res) => {
            if (res.code === 200) {
              localSave('userInfo', res.data)
              menuDispatch
                .use('route', res.data.id, 'path')
                .then((res) => {
                  if (res.code === 200) {
                    const routesData = res.data
                    const routes = fnAddDynamicMenuRoutes(routesData)
                    localSave('dynamicMenuRoutes', routes)
                    const newRoutes = filterAsyncRouter(routes)
                    resetRouter()
                    this.$router.addRoutes(newRoutes)
                    this.$store.commit('setRoutes', newRoutes.concat(routers))
                    this.$router.push({
                      name: this.$config.homeName
                    })
                  }
                })
              this.$Message.success({
                background: true,
                content: '登录成功'
              })
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
